<template>
  <el-row :gutter="20">
        <el-col :span="6">
          
          <div
        class="first"
        >
        <div class="header">
            <div class="text"> BOM结构</div>
          </div>
          <el-scrollbar style="height: 800px; width: 100%" class="el-role-tree">
            <el-tree
            ref="bomtree"
            :data="bomdata"
            node-key="id"
            @node-expand="node_expand"
            @node-click="handleNodeClick"
          > 
            <template #default="{ node, data }">
            <span>
              <i :class="node.icon" style="font-size:8px;color:#FF9800;font-style:normal">{{node.label}}</i
              >
            </span>
          
          </template>
        </el-tree>
          </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="18">
           <div
        class="first"
        >
           <dj_stpo ref="dj_stpo"></dj_stpo>
          </div>
        </el-col>  
      </el-row>
</template>
<script>
import dj_stpo from '@/views/djerp/dj_base_data/dj_stpo.vue';
export default {
  components: {
    dj_stpo
  },
  created() {
    //初始化一个对象全局缓存起来，当点击左边树形菜单时，把点击菜单的treeId(角色id)存到treeDemo1里
    this.init_tree();
  },
  data() {
    return {
      bomdata: [
        {
          label: "100100100302[U型]",
          f_id: "100100100302",//本节点的id
          children: [{}],
        },
      ],
    };
  },
  methods: {
    init_tree(){
      this.bomdata.splice(0, this.bomdata.length); //先清空所有的子节点
       var turl =
            "/api/dj_stpo/get_fert";
          this.http.post(turl, {}, true).then((result) => {
            //console.log(result);
            for (let index = 0; index < result.dj_maras.length; index++) {
                const element = result.dj_maras[index];
               let obj={
                  label:element.matnr+"["+element.maktx_parent+"]",
                  f_id:element.matnr,
                  icon:'el-icon-plus',
                  children:[{}]
                }
              this.bomdata.push(obj);
            }
          })
    },
    node_expand(data, node) {  //展开BOM节点
      const children = node.data.children;
      children.splice(0, children.length); //先清空所有的子节点

       var turl =
            "/api/dj_stpo/get_bom_children?f_id=" + data.f_id;
          this.http.post(turl, {}, true).then((result) => {
            
            for (let index = 0; index < result.dj_stpo_children.length; index++) {
              const element = result.dj_stpo_children[index];
              //console.log(element);
              let children_count_t=[{}];
              if (element.child_num==0){
                children_count_t=null;
              }
               let obj={
                  label:element.idnrk+" "+element.maktx+"["+element.child_num+"]" ,
                  f_id:element.idnrk,
                  icon:'el-icon-plus',
                  children:children_count_t
                }
              data.children.push(obj);
            }
          });
    },
    handleNodeClick(node, selected){
      this.$store.getters.data().f_id = node.f_id;
      this.$refs.dj_stpo.$refs.grid.refresh();
      //console.log(node.f_id);
      //console.log(selected);
    }
  },
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.header {
  display: flex;
  margin-bottom: 10px;
}

.text {
  line-height: 30px;
  border-bottom: 2px solid #607d8b;
  font-size: 16px;
  /* color: #FF9800; */
  font-weight: 500;
}
.first {
  padding-top: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.sec {
  padding-top: 55px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}


</style>

